<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性 */
			img{
				border: 1px solid red;
				/* margin:1个属性值  顺时针：上 右 下 左*/
				margin: 200px;
				margin: 10px 200px;
				margin: 0 auto;
				margin: 100px 200px 300px;
			}
			h1{
				/*  */
				margin: 0 auto;
			}
			span{
				/*  */
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 框模型，盒子模型：四个部分组成：
		                     外边距：边框以外四周，叫做外边距
							 margin属性
							 边框：--
							 内边距：边框以内 与内容之间距离，叫做内边距-->
		<h1>块级元素</h1>
		<img src="img/雪人.png" width="300px" height="300px" alt="圣诞" />
		<span>行内元素：圣诞</span>
	</body>
</html>